<template>
  <el-scrollbar style="height:100%;">
  <el-row style="min-width:1280px;">
    <el-col :span="24" class="marginBottom8">
      <Portlet>
        <el-form ref="searchForm" class="el-form-col el-form-s search-form" :model="search">
          <el-row :gutter="15" style="position:relative;">

            <el-col :lg="4" :md="6" style="position: absolute">
              <el-form-item prop="orderNo">
                <el-input v-model="search.orderNo" type="textarea" :rows="4" placeholder="订单号  (支持多单查询，用英文逗号分隔)"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" :offset=4>
              <el-form-item prop="consigneeName">
                <el-input v-model="search.consigneeName" placeholder="客户姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consigneePhone">
                <el-input v-model="search.consigneePhone" placeholder="客户电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="serviceProvider">
                <el-input v-model="search.serviceProvider" placeholder="服务方"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="serviceProviderPhone">
                <el-input v-model="search.serviceProviderPhone" placeholder="服务方电话"></el-input>
              </el-form-item>
            </el-col>

            <el-col :lg="4" :md="6">
              <el-row class="search-btns" :gutter="5">
                <el-col :span="8">
                  <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button @click="resetFields" plain>重置</el-button>
                </el-col>
              </el-row>
            </el-col>

            <el-col :lg="4" :md="6" :offset="4">
              <el-form-item prop="addressArr">
                <CascadeAddress v-model="search.addressArr" :level="3" changeOnSelect placeholder="省市区" />
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="businessNo">
                <el-select v-model="search.businessNo" filterable placeholder="业务类型">
                  <el-option v-for="item in businessArr"
                             :key="item.value"
                             :label="item.text"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="serviceNo">
                <el-select v-model="search.serviceNo" filterable placeholder="服务类型">
                  <el-option v-for="item in serviceArr"
                             :key="item.value"
                             :label="item.text"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!--<el-col :lg="4" :md="6">-->
              <!--<el-select v-model="search.isAbnormal" clearable placeholder="是否异常">-->
                <!--<el-option label="是" value="1"></el-option>-->
                <!--<el-option label="否" value="0"></el-option>-->
              <!--</el-select>-->
            <!--</el-col>-->
            <el-col :lg="4" :md="6">
              <el-form-item prop="startFoundDate">
                <el-date-picker type="date"
                                placeholder="下单开始时间"
                                v-model="search.startFoundDate"
                                value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="endFoundDate">
                <el-date-picker type="date"
                                placeholder="下单结束时间"
                                v-model="search.endFoundDate"
                                value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-collapse-transition>
            <div v-show="isOpen">
              <el-row :gutter="15" style="position:relative;">
                <el-col :lg="4" :md="6">
                  <el-form-item prop="colorFlag">
                    <el-select v-model="search.colorFlag" filterable placeholder="订单标记">
                      <el-option v-for="item in colorArr"
                                 :key="item.value"
                                 :label="item.text"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item prop="signStart">
                    <el-date-picker type="date"
                                    placeholder="签收开始时间"
                                    v-model="search.signStart"
                                    value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item prop="signEnd">
                    <el-date-picker type="date"
                                    placeholder="签收结束时间"
                                    v-model="search.signEnd"
                                    value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-transition>
        </el-form>
      </Portlet>
    </el-col>
    <el-col :span="24" class="marginBottom8">
      <el-tabs v-model="search.orderState" @tab-click="handleClick">
        <el-tab-pane label="已完成" name="4">
          <table class="order-table">
            <tr v-for="(item, index) in tableData" :key="index">
              <td class="order-table-td">
                <table class="order-table-td-table">
                  <tr class="tr-header">
                    <td width="30%" align="left" colspan="2">
                      订单号：<a @click="show(item)" >{{item.orderNo}}</a>
                      <span style="margin-left:10px;"><mark-template :id="item.id" :resultColor="item.colorFlag ? item.colorFlag : 'gray'"  @refresh="refresh"></mark-template></span>
                    </td>
                    <td width="20%" align="left">
                      服务方：{{item.serviceProvider}} （ {{item.serviceProviderPhone}} ）
                      <img @click.prevent="startImHistory(item)"
                           style="cursor: pointer"
                           src="/static/images/im/im-start.png"
                           width="17px" alt="im">
                    </td>
                    <td width="25%" align="center">
                      {{item.business}} | {{item.service}}：<span class="font-orange font-weight500">{{item.orderState | filterDataBaseDictionary}}</span>
                    </td>
                    <td width="25%" align="center">
                      下单时间：{{item.foundTime}}
                    </td>
                  </tr>
                  <tr class="tr-body">
                    <td>
                      <Upload-image :listItemStyle="listItemStyle" :showPictureNum="true" :readonly="true" :value="handleJsonStringArr(item.imgAddress)"></Upload-image>
                    </td>
                    <td>
                      <div>
                        <div class="marginBottom8">
                          商品名称：<truncate :value="item.goodsName" :maxLength="10"></truncate>
                        </div>
                        <div class="marginBottom8">
                          商品数量：{{item.goodsSum}}套
                        </div>
                      </div>
                      <div class="clearfix"></div>
                    </td>
                    <td>
                      <div class="marginBottom8">
                        客户姓名：{{item.consigneeName}} {{item.consigneePhone}}
                      </div>
                      <div class="marginBottom8">
                        客户地址：<truncate :value="item.consigneeProvince + item.consigneeCity + item.consigneeDistrict + item.consigneeAddress" :maxLength="24"></truncate>
                      </div>
                    </td>
                    <td align="center">
                      <div class="marginBottom8">
                        <span style="font-size: 24px;font-weight: bold;"
                              class="font-red">￥{{item.endFee | decimalNumFilter}}</span>
                      </div>
                      <div class="marginBottom8">
                        实付金额
                      </div>
                    </td>
                    <td align="center">
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </el-tab-pane>
        <el-tab-pane label="已关闭" name="8">
          <table class="order-table">
            <tr v-for="(item, index) in tableData" :key="index">
              <td class="order-table-td">
                <table class="order-table-td-table">
                  <tr class="tr-header">
                    <td width="30%" align="left" colspan="2">
                      订单号：<a @click="show(item)" >{{item.orderNo}}</a>
                      <span style="margin-left:10px;"><mark-template :id="item.id" :resultColor="item.colorFlag ? item.colorFlag : 'gray'"  @refresh="refresh"></mark-template></span>
                    </td>
                    <td width="20%" align="left">
                      服务方：{{item.serviceProvider}} （ {{item.serviceProviderPhone}} ）
                    </td>
                    <td width="25%" align="center">
                      {{item.business}} | {{item.service}}：<span class="font-orange font-weight500">{{item.orderState | filterDataBaseDictionary}}</span>
                    </td>
                    <td width="25%" align="center">
                      下单时间：{{item.foundTime}}
                    </td>
                  </tr>
                  <tr class="tr-body">
                    <td>
                      <Upload-image :listItemStyle="listItemStyle" :showPictureNum="true" :readonly="true" :value="handleJsonStringArr(item.imgAddress)"></Upload-image>
                    </td>
                    <td>
                      <div>
                        <div class="marginBottom8">
                          商品名称：<truncate :value="item.goodsName" :maxLength="10"></truncate>
                        </div>
                        <div class="marginBottom8">
                          商品数量：{{item.goodsSum}}套
                        </div>
                      </div>
                      <div class="clearfix"></div>
                    </td>
                    <td>
                      <div class="marginBottom8">
                        客户姓名：{{item.consigneeName}} {{item.consigneePhone}}
                      </div>
                      <div class="marginBottom8">
                        客户地址：<truncate :value="item.consigneeProvince + item.consigneeCity + item.consigneeDistrict + item.consigneeAddress" :maxLength="24"></truncate>
                      </div>
                    </td>
                    <td align="center">
                      <div class="marginBottom8">
                        <span style="font-size: 24px; font-weight: bold;"
                              class="font-red">￥{{item.endFee | decimalNumFilter}}</span>
                      </div>
                      <div class="marginBottom8">
                      </div>
                    </td>
                    <td align="center">
                      <div>
                        关闭时间：{{item.refundColoseDate | unixTimestampFilter}}
                      </div>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </el-tab-pane>
      </el-tabs>
      <el-col :span="24">
        <Pagination style="margin-top: 20px" class="pull-right" :total-item="totalItem" @pagination="pagination" @sizeChange="sizeChange" :perItem="params.pageSize"></Pagination>
      </el-col>
    </el-col>
  </el-row>
  </el-scrollbar>
</template>
<script>
import {copy, dotData, merge, handleJsonStringArr, getImage} from '@/utils'
import {showHistoryList} from '@/utils/im'
import {filterSecond, filterDataBaseDictionary, unixTimestampFilter, decimalNumFilter} from '@/filters'
import {getFhbBsteType, getFhbServiceType} from '@/utils/selectOptions'
import markTemplate from '@/components/markTemplate'
export default {
  name: 'myOrdersCompletedIndex',
  components: {
    markTemplate
  },
  filters: {
    filterSecond,
    filterDataBaseDictionary,
    unixTimestampFilter
  },
  data() {
    return {
      listItemStyle: {
        width: '120px',
        height: '90px'
      },
      searchLoading: false,
      params: {
        pageSize: 5,
        pageNum: 1
      },
      totalItem: 0,
      tableData: [],
      businessArr: [],
      serviceArr: [],
      colorArr: [
        {text: '红色', value: 'red'},
        {text: '橙色', value: 'orange'},
        {text: '黄色', value: 'yellow'},
        {text: '绿色', value: 'green'},
        {text: '蓝色', value: 'blue'}
      ],
      search: {
        orderState: '4',
        orderNo: '',
        consigneeName: '',
        consigneePhone: '',
        businessNo: '',
        serviceNo: '',
        isAbnormal: '',
        colorFlag: '',
        startFoundDate: '',
        endFoundDate: '',
        addressArr: [],
        signStart: '',
        signEnd: ''
      },
      rows: [],
      isOpen: false
    }
  },
  computed: {
  },
  created() {
    // 发货宝业务类型
    getFhbBsteType().then(data => {
      this.businessArr = data
    })
    // 服务类型
    getFhbServiceType().then(arr => {
      this.serviceArr = arr
    })
    // 获取data
    this.getTableData()
  },
  methods: {
    getImage,
    unixTimestampFilter,
    decimalNumFilter,
    handleJsonStringArr,
    handleClick() {
      this.searchFunc()
    },
    pagination(page) {
      this.params.pageNum = page
      this.searchFunc()
    },
    sizeChange(size) {
      this.params.pageSize = size
      this.searchFunc()
    },
    show(data) {
      this.$router.push({path: '/ss-fhb/myOrders/completed/show/' + data.id})
    },
    searchFunc(search) {
      this.getTableData()
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    // 表格刷新
    refresh() {
      this.searchFunc(this.search)
    },
    selectionChange(rows) {
      this.rows = rows
    },
    // reset 重置搜索框
    reset(searchForm) {
      this.$refs.searchForm.resetFields()
    },
    getTableData() {
      let data = copy(this.search, true)
      data = merge(data, this.params)
      // 处理地址
      data.provinceNo = dotData(data.addressArr, '[0]') || ''
      data.cityNo = dotData(data.addressArr, '[1]') || ''
      data.districtNo = dotData(data.addressArr, '[2]') || ''
      delete data.addressArr
      this.$ajax.table('/ms-fahuobao-json-view/FhbOrder/findFhbOrderAll', data).then(response => {
        this.tableData = response.data || []
        this.totalItem = response.totalItem
        this.tableData.forEach(v => {
          v.imgAddress = handleJsonStringArr(v.imgAddress)
        })
      })
    },
    showConfirmModal() {
    },
    // 查看im 历史
    startImHistory(item) {
      const {orderNo} = item
      showHistoryList(orderNo).then(_ => {
        this.$router.push({path: '/redirect/ss-fhb/systemNotice'})
      })
    }
  }
}
</script>
